
//一.下载模块   命令：cnpm i 模块名 -D

//二.导入模块
//  const 模块名 = require('模块名')
    const gulp = require('gulp')            // gulp模块，用于创建任务的
    //下载模块  命令：cnpm i gulp-uglify -D
    const uglify = require('gulp-uglify')   // 压缩JS 去空格去注释
    //下载模块  命令：cnpm install gulp-babel@7 babel-preset-env babel-core -D
    const babel = require('gulp-babel')     // es6转es5 浏览器兼容 babel
    //下载模块  命令：cnpm i gulp-rev -D
    const rev = require('gulp-rev')         // 加随机名的，内容修改就重新生成新的随机名
    //下载模块  命令：cnpm i gulp-rev-collector -D
    const revCollector = require('gulp-rev-collector'); // 根据temp目录记录的规则 替换 html路径
    //下载模块  命令：cnpm i gulp-clean -D
    const clean = require('gulp-clean')     // 删除目录文件dist 在写到dist目录下之前编写这个代码
    //下载模块  命令：cnpm i gulp-minify-css -D
    const minifyCSS = require('gulp-minify-css') // 压缩CSS 去空格去注释的
    //下载模块  命令：cnpm i gulp-imagemin -D
    const imagemin = require('gulp-imagemin') // 压缩图片
    //下载模块  命令：cnpm i gulp-htmlmin -D
    const htmlmin = require('gulp-htmlmin')  // 压缩HTML 去空格去注视
    //下载模块  命令：cnpm i browser-sync -D
    // const server = require('browser-sync').create(); 
    //下载模块  命令：cnpm i gulp-watch -D

    //下载模块  命令：cnpm i http-proxy-middleware -D
    const proxy = require('http-proxy-middleware')

//三.调用方法创建任务
//初体验  默认任务
gulp.task('default', () => {
    //打印神龙教主@qf
    console.log('神龙教主@qf');
})
// 初体验  自定义任务
gulp.task('js', () => {
    console.log('后期这里面去打包压缩项目的js代码');
})

// 打包IMG任务（图片不用加随机名）
gulp.task('imgs', over => {
    gulp
        //1.获取到文件数据
        //一个文件   .src('路径及文件名后缀')  
		//多个文件   .src(['路径及文件名后缀','路径及文件名后缀'])  
        //所有文件   .src('./src/js/*.js')   
        .src('./src/imgs/*.*') 
        //2.过滤数据  .pipe( 模块名() )
        .pipe( imagemin() )
        //3.写到dist目录下  .pipe( gulp.dest('./dist/js/') )  
        .pipe( gulp.dest('./dist/imgs/') )
    setTimeout(() => { // 因为clean这里面的代码都是异步的
        over()
    }, 30000)
})
// 打包CSS任务  先把js文件写入到dist目录下，后把css随机名写入到temp目录下
gulp.task('css', over => {
    gulp
        //1.获取到文件数据
        .src('./src/css/*.css')
        //2.过滤数据 
        .pipe( minifyCSS() )
        //3.随机文件名
        .pipe( rev() )
        //4.写到dist目录下        
        .pipe( gulp.dest('./dist/css/') )
        //5.每次打包将css对应的随机名保存到json中
        .pipe( rev.manifest() )
        .pipe( gulp.dest('temp/css') )  //写入清单以temp为目录
    over()
})
// 清除目录
const fs = require('fs');
gulp.task('clean', over => {
    if (fs.existsSync('dist/')){
        //1.获取到文件数据
        gulp.src('dist/',{read: false})
        //2.删除目录文件dist 
        .pipe(clean());
    }
    setTimeout(() => { // 因为clean这里面的代码都是异步的
        over()
    }, 2000)
})
// 打包JS任务  先把js文件写入到dist目录下，后把js随机名写入到temp目录下
gulp.task('js', over => { 
    gulp
        //1.获取到文件数据
        .src('./src/js/*.js')
        //2.配置
        .pipe(babel({"presets": ["env"]}))
        //3.过滤
        .pipe(uglify())
        //4.随机文件名
        .pipe(rev())
        //5.写到dist目录下 
        .pipe( gulp.dest('./dist/js/') )
        //6.每次打包将js对应的随机名保存到json中
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/js'))  //写入清单以temp为目录
    over()
})

// 打包HTML任务
// gulp.task('html', () => {
    gulp.task('html', over => {

        var options = {
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
            minifyJS: true,//压缩页面JS 
            minifyCSS: true//压缩页面CSS
        }; 
        gulp
            //1.获取到文件数据
            .src(['temp/**/*.json', './src/*.html'])
            //2.过滤
            .pipe( revCollector() )
            //3.配置
            .pipe( htmlmin(options) )
            //4.写到dist目录下 
            // .pipe( gulp.dest('./dist/html/') )
            .pipe( gulp.dest('./dist/') )

        over()
    })


// 通过node搞web服务器开发的时候使用
const server = require('browser-sync').create(); 
const watch = require('gulp-watch'); 
//启动一个web服务器，底层就是node中http模块，去开发
const { createProxyMiddleware } = require('http-proxy-middleware');
gulp.task('serve', () => {
    // console.log('提供web服务器访问src下面的代码去开发 而不是用live server ');
    server.init({
        // server:'./src',
        server: {
            baseDir: './src',
            middleware: [
                //后期这个网站只要请求地址是/api开头的都会被拦截
                //前端模块帮忙代理请求  然后返回数据
                //http://localhost/qpi/goods/like.jsp 由node模块代理请求
                //最终请求的地址是:target + $.get/post/ajax的url
                //http://kg.zhaodashen.cn/v1/  +  /api/goods/like.jsp   多了/api 故移除
                // 猜你喜欢接口  http://kg.zhaodashen.cn/v1/goods/like.jsp
                createProxyMiddleware('/api', { 
                    // 目标服务器网址
                    target: "http://kg.zhaodashen.cn/v1/",   //target: "后端接口地址"
                    changeOrigin: true, // 是否允许跨域
                    secure: false,      // 关闭SSL证书验证https协议接口需要改成true
                    pathRewrite: {      // 重写路径请求
                        // 移除 '^/remove/api' : ''
                        '^/api':''
                    },
                })
            ]
        },
        port: 80
    })
    // 监控文件修改
    watch('src/*.html', function() {
        console.log('你修改HTML文件了')
        server.reload()
    })
    watch('src/css/*.css', function() {
        console.log('你修改CSS文件了')
        server.reload()
    }) 
    watch('src/js/*.js', function() {
        console.log('你修改JS文件了')
        server.reload()
    })
})
// 批量打包  打包生成代码放到dist目录 将这个目录上传到服务器 朋友就可以访问
gulp.task('build', gulp.series('clean', 'js', 'css', 'imgs', 'html', () => {
    // gulp clean
    // gulp js
    // gulp css
    // gulp imgs
    // gulp html
    console.log('BUILD打包完成');
}))

// 四.触发/打包
// 命令行敲击命令 : gulp 任务名
// 每次修改完 可以敲击命令：gulp clean 清除dist目录中打包的文件 进行重新打包压缩
// 留心：不写任务名则默认触发default 默认任务


//五.在网页中运行src中的文件